<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>注册页面</title>
		<link rel="stylesheet" href="/css/index.css" />
	</head>
	<body>
		<div class="login">
			<h2>用户注册</h2>
			<div class="login_box">
				<!-- required就是不能为空 必须在css效果中有很大的作用 -->
				<!-- 可以简写为required -->
				<input  type="text" required  id="username"/><label>用户名</label>
			</div>
			<div class="login_box">
				<input  type="text" required id="tel"/><label>电话</label>
			</div>
			<div class="login_box">
				<input  type="password" required id="password"/><label>密码</label>
			</div>
			<div class="login_box">
				<input  type="password" required id="password2"/><label>确认密码</label>
			</div>
			<div class="login_box">
				<span style="color: #fff;font-size: 16px;">上传头像</span><input  type="file" required id="tx" />
			</div>
			<div class="login_box">
				<input  type="text" required id="yzm"/><label>输入验证码</label>
			</div>
			<div style="text-align: center">
				<img src="/getYzm" onclick="changeYzm(this)">
			</div>
			<div class="buttons">
				<a onclick="register()" >
					注册
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</a>
				<a  class="buttons_2" onclick="toLogin()">
					登录
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</a>
				<p style="color: red;margin-top: 10px;text-align: center" id="message"></p>
			</div>
			<script src="/js/jquery-3.6.0.js"></script>
			<script>
				function changeYzm(o) {
					o.src="/getYzm?d="+new Date()
				}

				function register() {
					var username = $("#username").val();
					var password = $("#password").val();
					var tel = $("#tel").val();
					var password2 = $("#password2").val();
					var yzm=$("#yzm").val();
					var tx=$("#tx")[0].files[0];

					var formData=new FormData;
					formData.append("username",username);
					formData.append("password",password);
					formData.append("tel",tel);
					formData.append("password2",password2);
					formData.append("yzm",yzm);
					formData.append("tx",tx);

					$.ajax({
						type:"post",
						url:"/register",
						// data:"username="+username+"&password="+password+"&tel="+tel+"&password2="+password2+"&yzm="+yzm+"&tx="+tx,
						data: formData,
						processData: false,
						contentType: false,
						success:function (R){
							if (R.code==200){
								sessionStorage.setItem("message2",R.data);
								location.href="/html/login.html";
							}
							if (R.code==300){
								$("#message").html(R.data);
								$("#username").val("");
								$("#password").val("");
								$("#password2").val("");
								$("#tel").val("");
								$("#yzm").val("");
							}
						}
					})
				}

				function toLogin(){
					sessionStorage.setItem("message","");
					location.href="/html/login.html";
				}
			</script>
		</div>
	</body>
</html>
